<style scoped lang="scss">
    .searchBarWrapper {
        position: absolute;
        top: 40px;
        width: 100%;
        z-index: 998;
        padding-left: 20px;
        left: 0px;
        background: #fff;
    }

    .itemBlock {
        display: flex;
        margin-bottom: 20px;

        .erpimage {
            width: 55px;
            height: 55px;
            border: 1px solid #ddd;
            border-radius: 5px;

            ::v-deep img {
                border-radius: 5px;
            }
        }

        .rightContainer {
            padding-left: 10px;

            h3 {
                padding: 0px;
                margin: 0px;
                padding-bottom: 10px;
            }
        }


    }

    .wrapperSubmitButton {
        position: fixed;
        bottom: 0px;
        left: 0px;
        padding-bottom: 20px;
        padding-top: 20px;
        padding-left: 20px;
        width: 100%;
        background: #fff;

        .submitButton {
            border-radius: 20px;
            width: 90%;
        }
    }


    ::v-deep .valueClass {
        text-align: left;
        padding-left: 10px;
        color: #222;
    }


    input.erp-input {
        border: none;
        background: #f7f8fa;
        min-height: 30px;
        padding-left: 10px;
        font-size: 14px;
    }


</style>
<template>
    <div class="content">
        <div style="min-height:600px;;">
            <div style="display: flex;padding-left: 10px;padding-right: 10px;">
                <input type="text"
                       class="erp-input"
                       v-model="queryParams.name" style="width: 45%;margin: 0px;margin-right: 10px;"
                       placeholder="产品名称"
                       @change="onSearch"
                />
                <input type="text"
                       class="erp-input"
                       v-model="queryParams.code" style="width: 45%;margin: 0px;"
                       placeholder="产品编号"
                       @change="onSearch"
                />
            </div>

            <section>
                <van-list
                        v-model:loading="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onRefresh"
                >
                    <div style="min-height:600px;padding:15px;margin-bottom:10px;margin-top: 20px;">
                        <van-radio-group v-model="selectId" :max="1">
                            <div v-for="(item,index) in dataList" :key="index"
                                 class="itemBlock"
                            >
                                <van-radio :name="item.id" :ref="`radio_${item.id}`"
                                ></van-radio>
                                <section style="display: flex;margin-left:15px;">
                                    <erp-image :src="completeFilePath(item.imgUrl)" class="erpimage"
                                    ></erp-image>
                                    <div class="rightContainer" @click="()=>triggerSelect(item,index)">
                                        <h3>
                                            {{item.name}}
                                        </h3>
                                        <div>
                                            {{item.code}}
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </van-radio-group>
                    </div>
                </van-list>

            </section>
        </div>
    </div>
</template>
<script lang="ts">
    import {defineComponent} from 'vue';
    import * as api from '@/api/supplier.api'
    import {Supplier} from "@/types/supplier";
    import ErpImage from '@/components/ErpImage/index.vue'
    import DicTag from '@/components/DicTag/dic-tag.vue';
    import {concatList, findInArray} from "@/utils/lodashUtils";
    import {alertFail} from "@/utils/alertUtils";
    import * as  productnewApi from '@/api/productnew.api'

    interface IData {
        dataList: Supplier[];

        [prop: string]: any;
    }


    export default defineComponent({
        data() {
            return {
                loading: false,
                show: false,
                finished: false,
                total: 0,
                queryParams: {
                    code: "",
                    pageSize: 10,
                    pageNum: 1,
                },
                dataList: [],
                productId: "",

                selectName: "",
                selectId: '',
            } as unknown as IData;
        },
        props: {
            _selectId: {
                type: [String, Object]
            },
            _selectName: {
                type: [String, Object]
            },
        },
        watch: {
            "$props._selectName"(name) {
                this.selectName = name
            }

        },
        mounted() {
            this.getInfoList();
        },
        components: {
            ErpImage,
            DicTag,
        },
        methods: {
            onSearch() {
                this.queryParams.pageNum = 1;
                this.dataList = [];
                this.getInfoList();
            },
            triggerSelect(dom: any) {
                debugger

            },

            initByDialog() {
            },
            triggerShow() {
            },
            async getInfoList() {
                var result = await productnewApi.getList(this.queryParams);
                this.total = result.count || 0;
                var newList = result.data || [];
                console.log('列表 数据', newList);
                this.dataList = newList
            },

            submitByDialog() {
                var selectId = this.selectId
                console.log('选中的 selectId', selectId)
                if (!selectId) {
                    alertFail('请选择')
                    return {success: false}
                }
                var findOne = findInArray(this.dataList, item => item.id == this.selectId)


                if (findOne && findOne.id) {
                    this.selectName = findOne.name
                }

                this.$emit('update:_productId', this.selectId)
                this.$emit('update:_productName', this.selectName)
                this.$emit('change', findOne)
                return {success: true, data: findOne}
            },

            async onRefresh() {
                this.queryParams.pageNum = Number(this.queryParams.pageNum) + 1;
                this.loading = true;
                var result = await productnewApi.getList(this.queryParams);
                this.total = result.count || 0;
                var newList = result.data || [];
                if (this.total <= 0) {
                    this.finished = false;
                }

                console.log('新的数据是', newList)
                concatList(this.dataList, newList, 'id')


                this.loading = false
                if (newList && newList.length < this.queryParams.pageSize) {
                    this.finished = true;
                }
            },
            triggerSelect(row,index){
                this.selectId=row&&row.id;

            }


        }
    });
</script>
